<template>
  <div class="cloud-apply-details">
    <p class="cloud-apply-details-meta">
      <span class="meta-key">应用名</span>
      <span class="meta-value">{{value.name}}</span>
    </p>
    <p class="cloud-apply-details-meta">
      <span class="meta-key">原始ID</span>
      <span class="meta-value">{{value.id}}</span>
    </p>
    <p class="cloud-apply-details-meta">
      <span class="meta-key">应用模型</span>
      <span class="meta-value">{{model[value.model]}}</span>
    </p>
    <p class="cloud-apply-details-meta">
      <span class="meta-key">应用类型</span>
      <span class="meta-value">{{value.type}}</span>
    </p>
    <p class="cloud-apply-details-meta" v-for="(item, index) in relevance" :key="index">
      <span class="meta-key">{{item.title}}</span>
      <span class="meta-value" v-if="item.editing == false">{{ value[item.key] || '未关联'}}</span>
      <span class="meta-value" v-if="item.editing == true">
        <Select v-model="value[item.key]" :datas="param"></Select>
      </span>
      <a href="javascript:;" class="desc-action" v-if="(item.editing == false) && value[item.key]" @click="relieve(item)">解除关联</a>
      <a href="javascript:;" class="desc-action" v-if="item.editing == false && !value[item.key]" @click="item.editing=true">申请关联</a>
      <a href="javascript:;" class="desc-action" v-if="item.editing" @click="affirm(item)">确认关联</a>
    </p>
  </div>
</template>
<script type="text/javascript">
export default {
  props: {
    value: [Array, Object]
  },
  data() {
    return {
      options: {},
      param2: [{ title: '选择0', key: 0 }, { title: '禁用选择', key: 1, disabled: true }, { title: '选择1', key: 'a1', other: '其他值' }, { title: '选择2', key: 'a2' }, { title: '选择3', key: 'a3' }],
      relevance: [{
        title: '微信小程序',
        editing: false,
        key: 'weapp'
      }, {
        title: '微信公众号',
        editing: false,
        key: 'wechat'
      }, {
        title: '微信开发者',
        editing: false,
        key: 'weixin'
      }, {
        title: '支付宝小程序',
        editing: false,
        key: 'alipay'
      }, {
        title: '支付宝开发者',
        editing: false,
        key: 'alidev'
      }],
      model: {
        'weapp': '微信小程序',
        'alipay': '支付宝小程序',
        'wechat': '微信公众号',
        'android': '安卓APP',
        'apple': '苹果APP',
        'app': '混合APP',
        'admin': '管理后台',
        'blog': '博客应用',
        'web': '手机网站'
      }
    };
  },
  /**
   * 计算属性
   * @type {Object}
   */
  computed: {
    param() {
      if (JSON.stringify(this.options) !== "{}") {
        let itemArray = [];
        for (let index in this.options) {
          let item = this.options[index];
          console.log("item", item)
          itemArray.push({
            title: item.AppID,
            key: item.AppID,
          })
        }
        return itemArray;
      }
    }
  },
  mounted() {
    console.log('this', this);
    this.handleApplyInfo();
  },
  methods: {
    /**
     * 修改绑定
     * @param  {[type]} item [description]
     * @return {[type]}      [description]
     */
    affirm(item) {
      this.$cloud.project().apply(this.value, 'config.apply.' + this.value.name).then(res => {
        item.editing = false;
      }).catch(error => {
        console.log('错误', error);
      });
    },
    relieve(item) {
      this.value[item.key] = ""
      console.log("item", item)
      this.$cloud.project().apply(this.value, 'config.apply.' + this.value.name).then(res => {
        item.editing = false;
      }).catch(error => {
        console.log('错误', error);
      });
    },
    handleApplyInfo() {
      this.$cloud.project().get(this.$cloud.AppID).then(res => {
        this.options = res.config.options;
        this.loading = false;
      }).catch(error => {
        console.log('错误', error);
      });
    }
  }
};

</script>
<style type="text/css">
.content {
  width: 100px;
  height: 200px;
}

.meta-value .h-select {
  display: inline-block;
  width: 160px;
  height: 27px;
}

</style>
